<template>
  <div>
    <div class="f-16 c_text2 mb-16 fw-6">对话接入上限</div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      class="flexbetween"
    >
      <div>
        <el-form-item label="">
          <select-tree
            v-model="queryParams.group"
            size="small"
            :treeList="treeList"
            nodeKey="id"
            :defaultData="defaultData"
            :treeProps="{
              children: 'children',
              label: 'label',
            }"
            placeholder='请选择分组'
            @handleNodeClick="selectDrop"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="" prop="keyword">
          <el-input
            v-model="queryParams.keyword"
            placeholder="查找关键词"
            clearable
            style="width: 220px"
            @keyup.enter.native="handleQuery"
            class="whiteappend"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
      </div>
      <el-form-item label="">
        <el-popover
          placement="bottom-start"
          width="200"
          trigger="click"
        >
          <div>
            <el-input placeholder="请输入限值" v-model="xz_num" class="input-with-primay">
              <el-button slot="append" type="primary">确认</el-button>
            </el-input>
          </div>
          <el-button slot="reference" size="small" plain type="primary" class="bg_fff">批量修改当前页</el-button>
        </el-popover>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" class="commtable chattable" :data="tableList">
      <el-table-column label="账号" min-width="300px" prop="userName">
        <template slot-scope="scope">
          <div class="flex align-center">
            <el-avatar class="account-avatar" shape="square">主账号</el-avatar>
            <div class="ml-12">
              <div class="mt-4 accounttext">19911383351</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="phonenumber" min-width="160px">
        <template>主账号</template>
      </el-table-column>
      <el-table-column label="所属分组" prop="phonenumber" min-width="160px">
        <template>未分组</template>
      </el-table-column>
      <el-table-column label="" prop="phonenumber" min-width="160px">
        <template slot="header">
          <span>对话接入上线 </span>
          <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
            <div slot="content">不参与分发的子账号可以将上限值设置为0</div>
            <svg-icon icon-class="iquestion" class-name="c_888999 f-14 ml-6" />
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-input size="small" style="width: 98px;"/>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import SelectTree from "@/components/SelectTree";
export default {
  data() {
    return {
      treeList: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 2,
              label: "二级 1-1",
            },
          ],
        },
        {
          id: 3,
          label: "一级 2",
        },
      ],
      defaultData: {
        value: "",
        name: "",
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        group:'',
        status:'',
        wxid:""
      },
      total: 0,
      loading: false,
      tableList: [{id:1,username:'水电费'}],
      xz_num:''
    };
  },
  components:{
    SelectTree
  },
  methods: {
    getList() {
      this.loading = true;
      getsubUserList(this.queryParams).then((response) => {
        this.tableList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    selectDrop(val) {
      this.defaultData.value = val;
    },

    handleLogin() {},
  },
};
</script>
<style lang="scss" scoped>
.iavatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.accounttext {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.chattable {
  ::v-deep .el-table__header-wrapper th {
    background-color: #f5f5f5;
    padding: 12px 0;
  }
}
.align-center {
  align-items: center;
}
.account-avatar {
  background: #ffe9cd;
  color: #ff7131;
  font-size: 12px;
}
</style>